<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.js"></script>
    <script src="js/jquery.qrcode.min.js"></script>

    <script>
        //生成二维码
        $(function() {
            $.mobile.pushStateEnabled = false;
            $('#popup1').qrcode({
                render: 'canvas',
                width: 150,
                height: 150,
                text: window.location.href,
            });
            $('#popup2').qrcode({
                render: 'canvas',
                width: 150,
                height: 150,
                text: window.location.href,
            });
            $('#popup3').qrcode({
                render: 'canvas',
                width: 150,
                height: 150,
                text: window.location.href,
            });
            $('#popup4').qrcode({
                render: 'canvas',
                width: 150,
                height: 150,
                text: window.location.href,
            });
            $('#popup_ipone4').qrcode({
                render: 'canvas',
                width: 150,
                height: 150,
                text: window.location.href,
            });

            $('.ui-icon-carat-l').on('tap', function() {
                history.go(-1);
            })

            $('#navbar li').on('tap', function() {
                // console.log($(this).index());
                if ($(this).index() == 1) {
                    // alert('1');
                    var $con = '';
                    var $num = 1;
                    for (var $i = 0; $i < 10; $i++) {
                        $con += '<li><h3>摘要' + $num + '</h3><p>资讯内容</p></li>';
                        $num++;
                    }
                    $('#main>#main_listview').html($con);

                }
                $('#main>#main_listview').listview('refresh'); //刷新列表视图

            })
        });
    </script>
</head>

<body>
    <!-- 首页 -->
    <div data-role="page" id="pageone">
        <div data-role="header" data-theme="b">
            <a class="ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext ui-btn-icon-left">返回</a>
            <h2>首页</h2>
            <a href="#popup1" data-rel="popup" class="ui-btn ui-btn-right ui-icon-camera ui-btn-icon-left" data-position-to="window" data-transition="flip">扫码</a>
            <div data-role="popup" id="popup1" class="ui-content">
                <a href="javascript:;" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
            </div>
        </div>
        <div data-role="main" class="ui-content">
            <ul data-role="listview" data-filter="true" data-filter-placeholder="根据关键字搜索......" data-inset="true">
                <li>
                    <a href="./goods_ipone4.html">
                        <img src="css/images/ipone4.jpg">
                        <h3>ipone4</h3>
                        <p>商品介绍</p>
                    </a>
                </li>
                <li>
                    <a href="./goods_ipone5.html">
                        <img src="css/images/ipone5.jpg">
                        <h3>ipone5</h3>
                        <p>商品介绍</p>
                    </a>
                </li>
                <li>
                    <a href="./goods_meizuM8.html">
                        <img src="css/images/meizu_m8.jpeg">
                        <h3>meizu M8</h3>
                        <p>商品介绍</p>
                    </a>
                </li>
                <li>
                    <a href="./goods_meizuMX4pro.html">
                        <img src="css/images/meizu_mx4pro.jpg">
                        <h3>meizu MX4pro</h3>
                        <p>商品介绍</p>
                    </a>
                </li>
                <li>
                    <a href="./goods_samsungNote10.html">
                        <img src="css/images/samsung_note10.jpeg">
                        <h3>samsung Note10</h3>
                        <p>商品介绍</p>
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="b">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li>
                        <a href="#pageone" data-icon="home" data-transition="none" class="ui-btn-active ui-state-persist">首页</a>
                    </li>
                    <li>
                        <a href="#pagetwo" data-icon="comment" data-transition="none">资讯</a>
                    </li>
                    <li>
                        <a href="#pagethree" data-icon="shop" data-transition="none">购物车</a>
                    </li>
                    <li>
                        <a href="#pagefour" data-icon="user" data-transition="none">我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 资讯 -->
    <div data-role="page" id="pagetwo">
        <div data-role="header" data-theme="b">
            <a class="ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext ui-btn-icon-left">返回</a>
            <h2>资讯</h2>
            <a href="#popup2" data-rel="popup" class="ui-btn ui-btn-right ui-icon-camera ui-btn-icon-left" data-position-to="window" data-transition="flip">扫码</a>
            <div data-role="popup" id="popup2" class="ui-content">
                <a href="javascript:;" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
            </div>
        </div>
        <div data-role="main" id="main" class="ui-content">

            <ul data-role="listview" id="main_listview" data-filter="true" data-filter-placeholder="根据关键字搜索......" data-inset="true">

            </ul>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="b">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li>
                        <a href="#pageone" data-icon="home" data-transition="none">首页</a>
                    </li>
                    <li>
                        <a href="#pagetwo" data-icon="comment" data-transition="none" class="ui-btn-active ui-state-persist">资讯</a>
                    </li>
                    <li>
                        <a href="#pagethree" data-icon="shop" data-transition="none">购物车</a>
                    </li>
                    <li>
                        <a href="#pagefour" data-icon="user" data-transition="none">我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 购物 -->
    <div data-role="page" id="pagethree">
        <div data-role="header" data-theme="b">
            <a class="ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext ui-btn-icon-left">返回</a>
            <h2>购物</h2>
            <a href="#popup3" data-rel="popup" class="ui-btn ui-btn-right ui-icon-camera ui-btn-icon-left" data-position-to="window" data-transition="flip">扫码</a>
            <div data-role="popup" id="popup3" class="ui-content">
                <a href="javascript:;" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
            </div>
        </div>
        <div data-role="main" class="ui-content">
            <h3>购物</h3>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="b">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li>
                        <a href="#pageone" data-icon="home" data-transition="none">首页</a>
                    </li>
                    <li>
                        <a href="#pagetwo" data-icon="comment" data-transition="none">资讯</a>
                    </li>
                    <li>
                        <a href="#pagethree" data-icon="shop" data-transition="none" class="ui-btn-active ui-state-persist">购物车</a>
                    </li>
                    <li>
                        <a href="#pagefour" data-icon="user" data-transition="none">我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 我的 -->
    <div data-role="page" id="pagefour">
        <div data-role="header" data-theme="b">
            <a class="ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext ui-btn-icon-left">返回</a>
            <h2>我的</h2>
            <a href="#popup4" data-rel="popup" class="ui-btn ui-btn-right ui-icon-camera ui-btn-icon-left" data-position-to="window" data-transition="flip">扫码</a>
            <div data-role="popup" id="popup4" class="ui-content">
                <a href="javascript:;" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
            </div>
        </div>
        <div data-role="main" class="ui-content">
            <h3>我的</h3>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="b">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li>
                        <a href="#pageone" data-icon="home" data-transition="none">首页</a>
                    </li>
                    <li>
                        <a href="#pagetwo" data-icon="comment" data-transition="none">资讯</a>
                    </li>
                    <li>
                        <a href="#pagethree" data-icon="shop" data-transition="none">购物车</a>
                    </li>
                    <li>
                        <a href="#pagefour" data-icon="user" data-transition="none" class="ui-btn-active ui-state-persist">我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>